<template>
  <el-container class="login">
    <el-card
      shadow="always"
      body-style="display: flex;flex-direction: column;align-items: center">
      <div
        slot="header"
        class="clearfix login-title">
        <span>登录</span>
      </div>
      <el-form label-position="right" label-width="40px">
        <el-form-item label="账号">
          <el-input v-model="userName"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-position="right" label-width="40px">
        <el-form-item label="密码">
          <el-input v-model="password"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      password: ''
    }
  },

  methods: {
    handleLogin () {
      const { userName, password } = this
      if (!userName.trim()) {
        this.$message.error('请输入正确的用户名')
        return
      }
      if (!password.trim()) {
        this.$message.error('请输入正确的密码')
        return
      }
      this.$ajax.get(`/findUser/${userName}/${password}`).then(res => {
        // console.log(res)
        localStorage.setItem('user', JSON.stringify(res))
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped>
.login {
  height: 100%;
  background: linear-gradient(135deg, #0E1524 0%, #203464 51%, #0E1524 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-title {
  text-align: center;

}
</style>
